<template>
    <div>
        <!--标签树设置开始-->
        <a-modal
                :visible="visible5"
                :confirmLoading="confirmLoading5"
                width="350px"
                closeIcon=""
                @ok="handleOk5"
                @cancel="handleCancel5">
            <div style="height: 400px;overflow-y:auto">
                <a-input placeholder="填写标签名称、搜索" v-model="lableValues.queryValue" style="margin-bottom: 8px" @change="queryPageLable" />

                <a-table    size="small"
                            :row-selection="rowSelection"
                            :pagination="false"
                            :columns="columns"
                            :data-source="neLableList"/>
            </div>
        </a-modal>
        <!--标签树设置结束-->
    </div>
</template>

<script>
    import { postAction  } from '@/api/dl'
    export default {
        name: "LableList",
        props: {
            obj:{//用来存储父级对象或根据实际需求存储需要的业务对象
                type: Object,
                default: null
            },
            note:{
                type: Object,
            },
            defaultValue:{
                type: Array,
            },
            defaultValueKey:{//默认是标签id串，如果传入的是对象数组时，需明确id的字段名称
                type: String,
                default: null
            }
        },
        watch: {
            'defaultValue': {//标签切换时
                handler: function(){
                    this.setValues(this.defaultValue);
                }
            }
        },
        data(){
            return {
                neLableList: null ,//标签池（list)
                visible5: false,//标签树,
                confirmLoading5: false,
                lableValues:{
                    values:[],//当前页已选中列表
                    vaulesAll:new Set(),//所有选中情况
                    queryValue:"",//模糊搜索条件
                },
                columns:[
                    {
                        title: '标签名称',
                        dataIndex: 'nl_name',
                    },
                ],
            }
        },
        computed:{
            rowSelection() {
                return {
                    selectedRowKeys:this.lableValues.values,
                    onChange: (selectedRowKeys, selectedRows) => {
                        let that=this;

                        //找到取消选中的id
                        let set1=new Set(this.lableValues.values);
                        let set2=new Set(selectedRowKeys);
                        let difference =new Set([...set1].filter(x => !set2.has(x)));//需要删除的id
                        difference.forEach(function (o) {
                            that.lableValues.vaulesAll.delete(o);
                        })

                        //设置当前页的已选中
                        this.lableValues.values=selectedRowKeys;
                        //设置所有的已选中
                        selectedRowKeys.forEach(function (o) {
                            that.lableValues.vaulesAll.add(o);
                        });
                        let k= Array.from(this.lableValues.vaulesAll);
                        this.$emit('change',k);
                    },
                    getCheckboxProps: record => ({
                        props: {
                            disabled: record.name === 'Disabled User', // Column configuration not to be checked
                            name: record.name,
                        },
                    }),
                };
            },
        },
        methods:{
            setValues(defaultValue){
                let that=this;
                this.lableValues.vaulesAll=new Set();
                this.lableValues.values=[];

                if(defaultValue){
                    defaultValue.forEach(function(o){//构建values
                        // console.log(o,that.defaultValueKey);
                        if(that.defaultValueKey){
                            that.lableValues.values.push(o[that.defaultValueKey]);
                            that.lableValues.vaulesAll.add(o[that.defaultValueKey]);
                        }else{
                            that.lableValues.values.push(Number(o));
                            that.lableValues.vaulesAll.add(Number(o));
                        }
                    });
                }
                // console.log(this.lableValues.values);
            },
            /**
             *  加载标签数据
             */
            load(){
                this.lableValues.queryValue="";
                this.queryPageLable();
                this.visible5 = true;
            },
            /**
             * 分页查询标签列表
             */
            queryPageLable(){
                let param={};
                param.queryValue=this.lableValues.queryValue;
                postAction('nelable/querylist',param).then((res) => {
                    if(res.is){
                        let that=this;
                        this.neLableList = res.data;
                        this.neLableList.forEach(function(o){
                            o.key=o.nl_id;
                        });
                        this.setValues(that.defaultValue);
                    }
                })
            },
            //标签树确定
            handleOk5(e) {
                this.visible5 = false;
            },
            //标签树取消
            handleCancel5(e) {
                this.visible5 = false;
            },
        }
    }
</script>

<style scoped>

</style>